<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 最新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script	src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script	src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!-- BootStrapValidator -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script th:src="@{/static/js/functions.js}"></script>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <form class="form-inline" id="searchForm" role="form" th:action="@{/test/findUser}" th:method="post">
            <div class="form-group col-md-2 offset-1">
                <input class="form-control input-sm" id="username" name="username" placeholder="用户名" th:value="${param.username}"
                       type="text"/>
            </div>
            <div class="form-group col-md-2">
                <select class="form-control input-sm" id="gender" name="gender">
                    <option value="">---不限制性别---</option>
                    <option th:selected="${#strings.trim(param.gender)=='1'}" value="1">男</option>
                    <option th:selected="${#strings.trim(param.gender)=='0'}" value="0">女</option>
                </select>
            </div>
            <div class="form-group col-md-1">
                <button class="btn btn-primary btn-sm" type="submit">搜索</button>
            </div>
        </form>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-sm table-hover">
                <thead>
                <tr>
                    <th>选项</th>
                    <th>#</th>
                    <th>用户名</th>
                    <th>真实姓名</th>
                    <th>出生日期</th>
                    <th>性别</th>
                    <th>爱好</th>
                    <th>学历</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="u,stat:${UserList}">
                    <td><input name="chk" th:value="${u.userid}" type="checkbox"/></td>
                    <td th:text="${u.userid}"></td>
                    <td th:text="${u.username}"></td>
                    <td th:text="${u.realname}"></td>
                    <td th:text="${u.birthdate}"></td>
                    <td th:text="${u.gender}=='1'?'男':'女'"></td>
                    <td th:text="${u.interest}"></td>
                    <td th:switch="${u.degree}">
                        <span th:case="1">高中</span>
                        <span th:case="2">大专</span>
                        <span th:case="3">本科</span>
                        <span th:case="4">研究生</span>
                    </td>
                    <td>

                        <button class="btn btn-default btn-xs btn-danger btn-primary" th:onclick="Updata([[${u.userid}]])">修改</button>
                        <button class="btn btn-default btn-xs btn-danger btn-primary" th:onclick="deleteUser()">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function deleteUser() {
        var str = [];
        var sel = document.getElementsByName("chk");//获取checkbox的值
        console.log(sel)
        for (var i = 0; i < sel.length; i++)
            if (sel[i].checked == true)
                str.push(sel[i].value);
        if (str == "") {
            alert("请至少选择一条记录");
            return false;
        }


        // if(window.confirm("确定删除吗")){
        //     window.location="./DeleteUser?userids="+str;
        // }
        if (window.confirm("确定删除吗")) {
            $.post("./DeleteUser", {userids: str.join(",")}, function (data) {
                window.location.reload();
            });
        }
    }

    function Updata(userid){

        window.location="./findIdUser?userid="+userid;
       // $.post("./findIdUser",{userid : userid}, function (data) {
       //     window.location.reload();
       // });
    }
</script>

</html>